<template>
  <div class="post-lists">
    <el-card class="!border-none" shadow="never" v-if="slot?.header">
        <slot name="header"></slot>
    </el-card>
    <el-card
      class="!border-none"
      :class="{
        'mt-4': slot?.header
      }"
      shadow="never"
    >
      <div ref="vxeTableRef" class="h-[72vh]">
          <vxe-table
              :export-config="{
                type: 'xlsx'
              }"
              :column-config="{resizable: true}"
              border
              show-overflow
              max-height="auto"
              ref="tableRef"
              :row-class-name="rowClassName"
              :loading="pager.loading"
              :tree-config="treeConfig"
              :virtual-y-config="{enabled: true, gt: 0}"
              :data="pager.lists"
                @cell-click="handleCellClick">
              <vxe-column :field="item.value" :fixed="item.fixed" :class-name="item.className" :min-width="item.width || defWidth" :title="item.title" v-for="(item,i) in pager.header" :key="i" :tree-node="i == 0"></vxe-column>
          </vxe-table>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts" setup name="OwnerStatisticsTelemarketing">

import { type VxeTablePropTypes } from 'vxe-table'

const props = withDefaults(defineProps<{
    pager:{
        lists: any[],
        header: any[],
        loading?: boolean
    }
    defWidth?:number|string
}>(),{
    defWidth:''
})

const slot = useSlots()
const emits = defineEmits(['cellClick'])
const tableRef = shallowRef()

const treeConfig = ref<VxeTablePropTypes.TreeConfig<any>>({
    transform: true,
    expandAll: true,
    parentField:'pid'
})

watch(()=>props.pager, async ()=>{
    await nextTick()
    tableRef.value?.setAllTreeExpand(true)
},{
    deep:true,
    immediate:true
})

const rowClassName = ({ row,rowIndex,$rowIndex }: any) => {
    if(row.json){
        return `${row.rowClassName} cp`
    }else{
        return `${row.rowClassName}`
    }
}

const handleCellClick = (data:any) => {
    emits('cellClick',data)
}

defineExpose({
    tableRef
})

</script>
<style lang="scss" scoped>
:deep(.vxe-table--render-default .vxe-tree--node-btn){
    background: transparent;
}
</style>
